<template>
  <el-row>
    <print-modal ref="PrintModal" :idArr="idArr" @refresh="refresh"></print-modal>
    <el-col :span="24">
      <Portlet :title="tableTitle">
        <el-form ref="searchForm" @keyup.enter.native="searchFunc(search)" class="el-form-col el-form-s search-form"
                 :model="search">
          <el-row :gutter="15" style="position:relative;">

            <el-col :span="4" style="position: absolute">
              <el-form-item prop="orderNo">
                <el-input v-model="search.orderNo" @keyup.enter.native.stop type="textarea" :rows="4"
                          placeholder="服务订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset=4>
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="用户姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="consignePhone">
                <el-input v-model="search.consignePhone" placeholder="用户电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="serviceCode">
                <el-select multiple v-model="search.serviceCode" filterable placeholder="服务类型">
                  <el-option v-for="item in serviceArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="goodsSouce">
                <el-select v-model="search.goodsSouce" filterable placeholder="仓储类型">
                  <el-option v-for="item in cargoSourceTypes"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-row class="search-btns" :gutter="5">
                <el-col :span="8">
                  <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span>
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" :offset="4">
              <el-form-item prop="cargoOwner" >
                <el-input v-model="search.cargoOwner" placeholder="商家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="placeUserName">
                <el-input v-model="search.placeUserName" placeholder="下单人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="addressArr">
                <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="foundStart">
                <el-date-picker type="date"
                                placeholder="下单开始时间"
                                v-model="search.foundStart"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="foundEnd">
                <el-date-picker type="date"
                                placeholder="下单结束时间"
                                v-model="search.foundEnd"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-collapse-transition>
            <div v-show="isOpen">
              <el-row :gutter="15">
                <el-col :span="4">
                  <el-form-item prop="orderState">
                    <el-select v-model="search.orderState" filterable placeholder="订单状态">
                      <el-option v-for="item in orderStateArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="orderSourceCode">
                    <el-select v-model="search.orderSourceCode" clearable placeholder="订单来源">
                      <el-option
                        v-for="item in orderSourceArr"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="outNo">
                    <el-input v-model="search.outNo" placeholder="来源单号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="boolStorage">
                    <el-select v-model="search.boolStorage" filterable placeholder="是否仓储">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </el-form>
      </Portlet>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-terminal-order/orderData/getOrderDataList"
        :initParams="initParams"
        @selection-change="selectionChange"
        :columns="columns">
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript: void (0);" @click.prevent="show(scope.row)">
                {{ scope.row.orderNo }}
              </a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row)"
              >
                详情
              </el-button>
              <el-button
                v-if="routeName == 'serviceOrdersIndex'"
                size="mini"
                type="text"
                @click="showPrintModal(scope.row)"
              >
                打印
              </el-button>
              <el-button
                v-if="routeName == 'serviceOrdersEditIndex'"
                size="mini"
                type="text"
                @click="edit(scope.row, true)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </template>
        <el-button slot="buttons" @click.prevent="showPrintModal" type="primary" >批量打印</el-button>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {copy, dotData} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import {getCargoSourceType, getServiceType, getOrderState, getSubDictListOfParentCode} from '@/utils/selectOptions'
import PrintModal from '@/views/oms/orders/serviceOrders/PrintModal'
export default {
  name: 'serviceOrdersIndex',
  components: {
    PrintModal
  },
  filters: {
    filterSecond,
    filterDataBaseDictionary
  },
  data() {
    let columns = [
      {
        label: '推单来源',
        data: 'outSourceWarehouse'
      },
      {
        label: '推单单号',
        data: 'outNo'
      },
      {
        label: '是否仓储',
        data: 'boolStorage',
        render: (data, type, full, meta) => {
          return data === 1 ? '是' : '否'
        }
      },
      {
        label: '仓储类型',
        data: 'goodsSouce',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '商家名称',
        data: 'cargoOwner'
      },
      {
        label: '服务类型',
        data: 'serviceName'
      },
      {
        label: '订单状态',
        data: 'orderState',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '用户姓名',
        data: 'consigneName'
      },
      {
        label: '用户电话',
        data: 'consignePhone'
      },
      {
        label: '用户地址省/市/区',
        data: 'consigneProvince+consigneCity+consigneDistrict',
        render(data, full) {
          return `${full.consigneProvince} ${full.consigneCity} ${full.consigneDistrict}`
        }
      },
      {
        label: '下单人',
        data: 'placeUserName'
      },
      {
        label: '线路起点',
        data: 'startProvince',
        width: '180px',
        render(data, full) {
          return `${full.startProvince} ${full.startCity} ${full.startDistrict}`
        }
      },
      {
        label: '线路终点',
        data: 'endProvince',
        render(data, full) {
          return `${full.endProvince} ${full.endCity} ${full.endDistrict}`
        }
      },
      {
        label: '下单时间',
        data: 'foundTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        }
      }
    ]
    let initParams = {
      tabState: 1
    }
    if (this.$route.name === 'serviceOrdersEditIndex') {
      columns.splice(3, 0, {
        label: '到件状态',
        data: 'arriveState',
        render(data, type, full, meta) {
          switch (String(data)) {
            case '1': return '部分到件'
            case '0': return '未到件'
            default: return '未知'
          }
        }
      })
      initParams.tabState = 2
    }
    return {
      cargoSourceTypes: [],
      searchLoading: false,
      initParams,
      serviceArr: [],
      modifyId: '',
      routeName: this.$route.name,
      search: {
        orderNo: '',
        goodsSouce: '',
        cargoOwner: '',
        consigneName: '',
        consignePhone: '',
        serviceCode: [],
        placeUserName: '',
        foundStart: '',
        foundEnd: '',
        orderState: '',
        addressArr: [],
        outSourceWarehouse: '',
        outNo: '',
        boolStorage: ''
      },
      orderStateArr: [],
      orderSourceArr: [],
      rows: [],
      idArr: [],
      isOpen: false,
      columns
    }
  },
  computed: {
    tableTitle() {
      if (this.$route.name === 'serviceOrdersEditIndex') {
        return '服务订单修改列表'
      }
      return '服务订单列表'
    }
  },
  created() {
    // 商家来源
    getCargoSourceType().then(arr => {
      this.cargoSourceTypes = arr
    })
    // 服务类型
    getServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 订单状态
    getOrderState().then(arr => {
      this.orderStateArr = arr
    })
    // 订单来源
    getSubDictListOfParentCode('CHORDERSOURCE').then(arr => {
      this.orderSourceArr = arr
    })
  },
  methods: {
    show(data, edit = false) {
      if (edit) {
        this.$router.push({path: '/ss-oms/orders/service-orders/edit-show/' + data.orderId})
      } else {
        this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
      }
    },
    searchFunc(search) {
      let data = copy(search, true)
      data.serviceCode = data.serviceCode.join(',')
      // 处理地址
      data.consigneProvinceNo = dotData(data.addressArr, '[0]') || ''
      data.consigneCityNo = dotData(data.addressArr, '[1]') || ''
      data.consigneDistrictNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.searchLoading = true
      this.$refs.BasicTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    selectionChange(rows) {
      this.rows = rows
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    showPrintModal(data) {
      this.idArr = []
      if (data.orderId) {
        this.idArr.push(data.orderId)
      } else {
        this.idArr = this.rows.map(v => v.orderId)
      }
      if (!this.idArr.length) {
        this.$message({
          type: 'warning',
          message: '请选择要打印的订单！'
        })
        return
      }
      this.$refs.PrintModal.show()
    },
    edit(data) { // 修改
      this.$router.push({path: '/ss-oms/orders/service-orders/edit/' + data.orderId})
    }
  }
}
</script>
